<template>
  <div class="side-right">
    <div class="side-wrapper" v-if="detailInfo.teachers.length > 0">
      <div class="title">讲师信息</div>
      <el-row
        type="flex"
        align="middle"
        class="content"
        v-for="item in detailInfo.teachers"
        :key="item.id"
      >
        <edu-avatar
          shape="circle"
          :src="item.avatar_url"
          :size="131"
          @click.native="handleTeachers(item.user_id)"
        ></edu-avatar>
        <div class="name" @click="handleTeachers(item.user_id)">
          {{ item.title }}
        </div>
        <div class="info">{{ item.signature }}</div>
      </el-row>
    </div>
    <div class="side-wrapper" v-if="!$util.isEmpty(detailInfo.mhm_info)">
      <div class="title">机构信息</div>
      <el-row type="flex" align="middle" class="content">
        <edu-avatar
          shape="circle"
          :src="detailInfo.mhm_info.logo_url"
          :size="131"
          @click.native="handleSchool(detailInfo.mhm_info.id)"
        ></edu-avatar>
        <div class="name" @click="handleSchool(detailInfo.mhm_info.id)">
          {{ detailInfo.mhm_info.title }}
        </div>
        <div class="info">课程数：{{ detailInfo.mhm_info.course_count }}</div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ['detailInfo'],
  methods: {
    // 讲师
    handleTeachers(id) {
      if (this.detailInfo.is_agent == 1) return
      this.$router.push({
        path: '/user',
        query: {
          id
        }
      })
    },
    // 机构
    handleSchool() {
      window.open(`${this.detailInfo.mhm_sdn}?id=${this.detailInfo.mhm_id}`, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
// 右侧
.side-right {
  float: right;
  width: 366px;
  .side-wrapper {
    background-color: #ffffff;
    & + .side-wrapper {
      margin-top: 14px;
    }
    .title {
      color: $text-color-import;
      font-size: 14px;
      height: 39px;
      line-height: 39px;
      padding: 0 22px;
      border-bottom: 1px solid #e4e7ed;
    }
    .content {
      padding: 24px 15px 60px;
      flex-direction: column;
      .el-avatar {
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
        cursor: pointer;
      }
      .name {
        margin-top: 24px;
        font-size: 14px;
        font-weight: 500;
        color: $text-color-import;
        cursor: pointer;
      }
      .info {
        margin-top: 20px;
        font-size: 13px;
        font-weight: 400;
        color: $text-color-secondary;
      }
    }
  }
}
</style>
